<template>
	<view>
			<image class="head-img" :src="detail.images"></image>
		<view class="content">
			<view class="title">{{ detail.brand ||'-' }}({{ detail.colour ||'-' }})</view>
			<view class="flex mt-40">
				<view class="flex-line"></view>
				<view>车辆信息</view>
			</view>
			<view class="flex1">
				<view class="flex">
					<view class="flex-title">车辆类型</view>
					<view class="flex-content">{{ detail.vehicleTypeName||'-' }}</view>
				</view>
				<view class="flex">
					<view class="flex-title">车源所在地</view>
					<view class="flex-content">{{ detail.vehicleLocation ||'-' }}</view>
				</view>
			</view>
			<view class="flex1">
				<view class="flex">
					<view class="flex-title">指导价</view>
					<view class="flex-content">{{ detail.guidePrice ||'-' }}</view>
				</view>
				<view class="flex">
					<view class="flex-title">寻车有效期</view>
					<view class="flex-content">{{ detail.lockForTime ||'-' }}</view>
				</view>
			</view>

			<view class="flex mt-40">
				<view class="flex-line"></view>
				<view>车主说</view>
			</view>
			<view class="remarks">{{ detail.remark }}</view>
		</view>

		<view class="btn">
			<view class="btn-text" @click="call">电话联系</view>
		</view>
	</view>
</template>

<script>

import SettleIn from '@/api/settleIn.js'
export default {
	data() {
		return {
			detail: {},
			id: '',
			phoneNumber: ''
		}
	},

	async onLoad(e) {
		if (e.id) {
			this.getDetail(e.id);

		}

	},
	onShow() {
	},
	filters: {
	},
	methods: {
		// saveLog
		async getDetail(id) {
			let res = await SettleIn.getInfoById({ id: id });
			if (res.code == 200) {
				this.detail = res.data;
				this.phoneNumber = res.data.phone
			}
		},
		async call() {
			let obj = {
				buySellCarId: this.id,
				log_type: 1,
				callerName: uni.getStorageSync('userName'),
				phoneNumber: this.phoneNumber
			}
			let res = await SettleIn.saveLog(obj);
			console.log(this.phoneNumber,'phoneNumber')
			uni.makePhoneCall({
				phoneNumber: this.phoneNumber, // 电话号码
				success: function () {
					console.log('拨打电话成功');

				},
				fail: function () {
					uni.showToast({
						icon: 'none',
						title: '拨打电话失败'
					})
					
				}
			})
		},
	}
}
</script>


<style>
.head-img {
	width: 750rpx;
	height: 563rpx;
	/* border: 1rpx solid #000; */
}

.content {
	margin: 20rpx 28rpx;
	background: #ffffff;
	padding: 20rpx;
}

.title {
	margin-top: 20rpx;
	width: 694rpx;
	color: #000000;
	font-family: "PingFang SC";
	font-size: 32rpx;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	opacity: 0.9;
}

.flex {
	display: flex;
	align-items: center;
}

.flex1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
}

.flex-line {
	width: 4rpx;
	height: 24rpx;
	border-radius: 4rpx;
	background: #1777FF;
	margin-right: 10rpx;
}

.mt-40 {
	margin-top: 40rpx;
	margin-bottom: 20rpx;
}

.flex-title {
	width: 140rpx;
	color: #000000;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	opacity: 0.3;
}

.flex-content {
	color: #000000;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	opacity: 0.9;
	width: 205rpx;
	white-space: nowrap;
	/* 文本不换行 */
	overflow: hidden;
	/* 隐藏溢出的内容 */
	text-overflow: ellipsis;
	/* 使用省略号表示被隐藏的内容 */
}

.remarks {
	width: 694rpx;
	color: #000000;
	text-align: justify;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 40rpx;
	opacity: 0.5;
	margin-bottom: 80rpx;
}

.btn {
	position: fixed;
	bottom: 80rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-text {
	width: 694rpx;
	height: 88rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 16rpx;
	background: #1777FF;
	color: #ffffff;
	text-align: center;
	font-family: "PingFang SC";
	font-size: 32rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx;
}
</style>